<!--
 * @Descripttion: 首页组件
 * @Author: congz
 * @Date: 2020-06-04 11:22:40
 * @LastEditors: congz
 * @LastEditTime: 2020-08-12 21:20:08
-->

<template>
	<div class="home" id="home" name="home">

		<!-- 轮播图 -->
		<div class="block">
			<el-carousel height="460px" style="text-align: center;">
				<el-carousel-item v-for="item in carousels" :key="item.id">
					<router-link :to="{ path: '/goodsDetails', query: {productID:item.product_id} }">
						<el-image style="height:460px;" :src="item.img_path" fit="fill"></el-image>
						<!-- <img width="100%" height="100%" v-lazy="item.img_path" /> -->
						<!-- <img style="height:460px;" v-lazy="'./assets/imgs/placeholder.png'" /> -->
						<!-- <img style="height:460px;" :src="randomImg()" /> -->
					</router-link>
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- 轮播图END -->

		<div class="main-box">
			<div class="main">

				<!-- 商品展示区域 -->
				<div class="appliance" id="promo-menu">
					<!-- 用户商品推荐 -->
					<div class="box-hd">
						<div class="title">你可能感兴趣</div>
						<div class="more" id="recommend">
							<MyMenu :val="0" @fromChild="getChildMsg">
							</MyMenu>
						</div>
					</div>
					<div class="box-bd">
						<div class="promo-list">
							<ul>
									<li>
										<img :src="randomImg()" />
									</li>
									<li>
										<img :src="randomImg()" />
									</li>
							</ul>
						</div>
<!--						<div class="list">-->
<!--							<MyList :list="recommend" :isMore="true"></MyList>-->
<!--						</div>-->
						<div class="list">
							<MyList :list="productsList" :isMore="true"></MyList>
						</div>
					</div>
					<!-- 用户商品推荐END -->

					<!--服装商品展示区域-->
					<div class="box-hd">
						<div class="title">服装</div>
						<div class="more" id="Clothing">
							<MyMenu :val="2" @fromChild="getChildMsg">
								<span slot="1">热门</span>
								<span slot="2">全部</span>
							</MyMenu>
						</div>
					</div>
					<div class="box-bd">
						<div class="promo-list">
							<ul>
								<li>
									<img :src="randomImg()" />
								</li>
							</ul>
						</div>
						<div class="list">
							<MyList :list="productsList" :isMore="true"></MyList>
						</div>
					</div>
					<!--服装展示区域END-->

					<!-- 家电商品展示区域 -->
					<div class="box-hd">
						<div class="title">家电</div>
						<div class="more" id="more">
							<MyMenu :val="2" @fromChild="getChildMsg">
								<span slot="1">热门</span>
								<span slot="2">全部</span>
							</MyMenu>
						</div>
					</div>
					<div class="box-bd">
						<div class="promo-list">
							<ul>
								<li>
									<img :src="randomImg()" />
								</li>
							</ul>
						</div>
						<div class="list">
							<MyList :list="productsList" :isMore="true"></MyList>
						</div>
					</div>
					<!-- 家电商品展示区域END -->

				</div>
				<!-- 商品展示区域END -->

			</div>
		</div>
	</div>
</template>

<script>
	import * as productsAPI from '@/api/products'

	export default {
		data() {
			return {
				carousels: '', // 轮播图数据
				recommend:[],//用户推荐列表
				applianceList: [], // 家电商品列表
				productsList: [],
				page: 1,
				pageSize: 7,
				total: -1,
			}
		},
		activated() {
			// 获取首页数据
			this.load()
		},
		methods: {
			load() {
				this.carousels = [{
						id: 1,
						product_id: 1,
						img_path: require('@/assets/imgs/tempImg/cms_1.jpg'),
					},
					{
						id: 2,
						product_id: 2,
						img_path: require('@/assets/imgs/tempImg/cms_2.jpg'),
					},
					{
						id: 3,
						product_id: 3,
						img_path: require('@/assets/imgs/tempImg/cms_3.jpg'),
					}
				];

				productsAPI
					.recommend()
					.then(res => {
						if (res.code == 10000){
							this.productsList = res.data.dataList;
							this.total = res.data.total;
						}
					})
					.catch(e => this.notifyError('连接错误', e));
			},
		},
		beforeRouteEnter(to, from, next) {
			// 添加背景色
			document
				.querySelector('body')
				.setAttribute('style', 'background-color:#ffffff')
			next()
		},
		beforeRouteLeave(to, from, next) {
			// 去除背景色
			document
				.querySelector('body')
				.setAttribute('style', 'background-color:#f5f5f5')
			next()
		}
	}
</script>
<style scoped>
	@import '../assets/css/index.css';
</style>
